<template>
  <div class="app-container">
    <div>
      
    </div>
    <div class="filter-container">
      <el-form ref="filterForm" :model="filterForm" :inline="true" label-position="left" label-width="100px">
        <el-form-item label="合约" prop="symbol">
          <el-input v-model="filterForm.symbol" clearable placeholder="合约" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="开仓时间" prop="tradeTime">
          <el-date-picker 
          clearable
            v-model="filterForm.tradeDate"
            type="date"
            placeholder="交易日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型" prop="style">
          <el-radio-group v-model="filterForm.style">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">开仓</el-radio-button>
            <el-radio-button label="2">平仓</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="filterForm.status">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">已提交</el-radio-button>
            <el-radio-button label="2">已委托</el-radio-button>
            <el-radio-button label="3">已撤单</el-radio-button>
            <el-radio-button label="4">已成交</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button @click="onPurchaseHiddenOpen()">开仓</el-button>
      <el-button @click="handleFilter()">搜索</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="ID" width="100px">
        <template slot-scope="{row}">
          <span>{{ row.ID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户" width="100px">
        <template slot-scope="{row}">
          <span>{{ row.inventorID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合约" prop="id" sortable="custom" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{ row.symbol }}</span>
          
              <el-tag v-if="row.action == 'close'">平仓</el-tag>
              
              <el-tag v-else type="success">开仓</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="价格" min-width="150px">
        <template slot-scope="{row}">
          <div>价格：{{ row.price }}</div>
          <div>数量：{{ row.quantity }}</div>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="{row}">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80px">
        <template slot-scope="{row}">
              <el-tag v-if="row.status == 1" effect="dark" type="danger">待提交</el-tag><el-tag effect="dark" type="success" v-else>已提交</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="委托时间" width="160px">
        <template slot-scope="{row}">
          <span>{{ row.tradeTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报单时间" width="160px">
        <template slot-scope="{row}">
          <span>{{ row.tradeTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报单状态" width="80px">
        <template slot-scope="{row}">
              <el-tag v-if="row.tradeStatus == 1">待提交</el-tag><el-tag v-else>已提交</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发起时间" width="160px">
        <template slot-scope="{row}">
          <span>{{ row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" v-if="row.status == 1" @click="handleModifyStatus(row,3)">
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="filterForm.page" :limit.sync="filterForm.perpage" @pagination="getList" />

    <el-dialog
      title="开仓"
      :visible.sync="purchaseHiddenOpen"
      :close-on-click-modal="false"
      width="30%">
      <el-form ref="filterForm" :model="purchaseForm"  label-position="left" label-width="100px">
        <el-form-item label="合约" prop="symbol">
          <el-input v-model="purchaseForm.symbol" clearable placeholder="合约" style="width: 200px;" class="filter-item"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="purchaseForm.action">
            <el-radio-button label="open">开仓</el-radio-button>
            <el-radio-button label="close">平仓</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="方向" prop="style">
          <el-radio-group v-model="purchaseForm.style">
            <el-radio-button label="1">看多</el-radio-button>
            <el-radio-button label="2">看空</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="purchaseForm.price" placeholder="价格" @input="handlePurchasePriceListen" style="width: 200px;" class="filter-item" />
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
            <el-input-number v-model="purchaseForm.quantity" @change="handlePurchaseQuantityListen" :min="1" :max="10" label="数量"></el-input-number>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="purchaseForm.amount"  readonly="readonly" placeholder="金额" />
        </el-form-item>
        <el-form-item label="手续费" prop="cost">
          <el-input v-model="purchaseForm.cost"  readonly="readonly" placeholder="手续费" />
        </el-form-item>
        <el-form-item label="总额" prop="capital">
          <el-input v-model="purchaseForm.capital" readonly="readonly" placeholder="总额" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="purchaseHiddenOpen = false">取 消</el-button>
        <el-button type="primary" @click="handlePurchaseSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//import { getFaultinessList,  removeFaultinessByID, changeFaultinessStatusByID } from '@/api/development/faultiness'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getAuthorizeList} from '@/api/position/authorize'
import {getSymbol} from '@/utils/symbol' // secondary package based on el-pagination

export default {
  name: 'financeDashboard',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      
      socket:"",
      tableKey: 0,
      list: null,
      windowHeight:"600",
      total: 0,
      listLoading: false,
      connected:"loading",
      purchaseForm:{
        quantity:1,
        price:0,
        symbol:""
      },
      purchaseHiddenOpen:false,
      filterForm: {
        page: 1,
        size: 10,
        localSymbol:"",
        status:5,
        style:"0",
        keyword: undefined
      }
    }
  },
  created() {
    let symbolData = getSymbol()
    try {
      this.filterForm.localSymbol = symbolData.code
    } catch (error) {
      
    }
    const now = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    this.filterForm.tradeDate = `${year}-${month}-${day}`;
    this.getList()
  },
  destroyed () {
  },
  methods: {
    getList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getAuthorizeList(_this.filterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.list = response.data.list
            this.total = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handlePurchaseQuantityListen:function(quantity){
      console.log(quantity)
      let accountCostWeight = 0.0003
      let accountMargin = 0.2
      let symbolWeight = 20
      this.purchaseForm.cost = quantity*this.purchaseForm.price*accountCostWeight;
      this.purchaseForm.amount = quantity*this.purchaseForm.price*symbolWeight*accountMargin;
      this.purchaseForm.capital = this.purchaseForm.cost+this.purchaseForm.amount;
      this.purchaseForm.capital = Number(this.purchaseForm.capital).toFixed(2)
      this.purchaseForm.cost = Number(this.purchaseForm.cost).toFixed(2)
    },
    handlePurchasePriceListen:function(){
      let accountCostWeight = 0.0003
      let accountMargin = 0.2
      let symbolWeight = 20
      let quantity = this.purchaseForm.quantity
      this.purchaseForm.cost = quantity*this.purchaseForm.price*accountCostWeight;
      this.purchaseForm.amount = quantity*this.purchaseForm.price*symbolWeight*accountMargin;
      this.purchaseForm.capital = this.purchaseForm.cost+this.purchaseForm.amount;
      this.purchaseForm.capital = Number(this.purchaseForm.capital).toFixed(2)
      this.purchaseForm.cost = Number(this.purchaseForm.cost).toFixed(2)
    },
    onPurchaseHiddenOpen:function(){
      this.purchaseHiddenOpen = true
    },
    handlePurchaseSubmit:function(){
      this.send({
        "conversationType":"position.authorize.save",
        "message":this.purchaseForm,
        "target":{"id":"3"}
      })

    },
    onPurchaseClean:function(){
      let _this = this;
      this.$confirm('此操作将清空所有持仓合约, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.send({
            "conversationType":"position.purchase.clean",
            "message":{"page":this.filterForm.start,"size":this.filterForm.perpage},
            "target":{"id":"3"}
          })
      }).catch(() => {
      });
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    },
    sortChange:function(){

    }
  }
}
</script>
<style>

</style>